<form class="form" (ngSubmit)="add(originInput)">
  <cnsl-form-field class="formfield">
    <cnsl-label>{{ title }}</cnsl-label>

    <input #originInput cnslInput [placeholder]="placeholder" [formControl]="redirectControl" />
  </cnsl-form-field>
  <button
    matTooltip="{{ 'ACTIONS.ADD' | translate }}"
    type="submit"
    mat-icon-button
    [disabled]="redirectControl.invalid || !canWrite"
  >
    <mat-icon>add</mat-icon>
  </button>
</form>

<div class="uri-list">
  <div *ngFor="let uri of urisList" class="uri-line">
    <span class="uri" [ngClass]="{ green: uri?.startsWith('https://'), red: !uri?.startsWith('https://') }">{{ uri }}</span>
    <span class="fill-space"></span>
    <!-- TODO add regex later -->
    <!-- <i *ngIf="!(uri | origin)" class="las la-exclamation red" [matTooltip]="'APP.NOTANORIGIN' | translate"></i> -->

    <button matTooltip="{{ 'ACTIONS.DELETE' | translate }}" mat-icon-button (click)="remove(uri)" class="icon-button">
      <mat-icon class="icon">cancel</mat-icon>
    </button>
  </div>
</div>

<p *ngIf="redirectControl.value && redirectControl.invalid" class="error">
  {{ 'APP.OIDC.REDIRECTNOTVALID' | translate }}
</p>
